<template>
  <div class="tablePageWarp">
    <!-- 搜索区域 -->
    <div class="tableListSearch">
      <a-form layout="vertical" class="listSearchWrap vehicleVersionSearch table-page-search-wrapper">
        <a-row :gutter="[16, 0]">
          <a-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" :xxl="4">
            <a-form-model-item :label="'员工名称:'">
              <a-input
                v-model.trim="queryParams.name"
                :placeholder="$t('pleaseInput') + $t('userName').toLowerCase()"
                :maxLength="50"
                @keyup.enter="refreshData(true)"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" :xxl="4">
            <a-form-model-item :label="'员工工号:'">
              <a-input
                v-model.trim="queryParams.account"
                @keyup.enter="refreshData(true)"
                :placeholder="$t('pleaseInput') + $t('loginAccount')"
                allowClear
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4" :xxl="4">
            <a-form-model-item :label="'问题类型:'">
              <a-select
                v-model="queryParams.questionTypes"
                mode="multiple"
                :allowClear="true"
                :filterOption="$commonFun.filterOption"
                :placeholder="$t('pleaseSelect') + $t('businessType')"
                showSearch
              >
                <a-select-option key="1" value="1" title="1">
                  平台功能使用疑问
                </a-select-option>
                <a-select-option key="2" value="2" title="2">
                  平台功能优化建议
                </a-select-option>
                <a-select-option key="3" value="3" title="3"> 功能缺陷反馈</a-select-option>
                <a-select-option key="4" value="4" title="4"> 其他</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="5" :xl="5" :xxl="5">
            <a-form-model-item :label="'反馈时间:'">
              <a-range-picker
                v-model="defaultDateRange"
                :getCalendarContainer="showtoBody()"
                :placeholder="[$t('startTime'), $t('endTime')]"
                @change="onCreateRangeChange"
                :allow-clear="true"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="7" :xl="7" :xxl="7">
            <div class="searchBtns" style="margin: 28px 0 0 0;">
              <a-button-group>
                <auth-button :auth="managePerms.userFeedback.view" type="primary" @click="refreshData">
                  <i class="iconfont icon-chazhao"></i>
                  {{ $t('inquiry') }}
                </auth-button>
                <a-button @click="clearCondition">
                  <i class="iconfont icon-qingkong"></i>
                  {{ $t('clear') }}
                </a-button>
              </a-button-group>
              <a-button type="primary" @click="handleHelpDescription">
                {{ $t('编制帮助说明') }}
              </a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="tableListMain commonTableSty">
      <s-table
        class="h100"
        ref="flowConfigTable"
        :columns="columns"
        :data="loadData"
        :showPagination="true"
        rowKey="key"
        :scrollX="890"
      >
        <template slot="userName" slot-scope="text, record">
          <table-ellipsis :text="record.name"></table-ellipsis>
        </template>
        <template slot="account" slot-scope="text, record">
          <table-ellipsis :text="record.account"></table-ellipsis>
        </template>
        <template slot="email" slot-scope="text, record">
          <table-ellipsis :text="text"></table-ellipsis>
        </template>
        <template slot="phone" slot-scope="text, record">
          <table-ellipsis :text="text"></table-ellipsis>
        </template>
        <template slot="time" slot-scope="text, record">
          <table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis>
        </template>
        <template slot="type" slot-scope="text, record">
          <table-ellipsis v-if="record.questionType == 1" text="平台功能使用疑问"></table-ellipsis>
          <table-ellipsis v-if="record.questionType == 2" text="平台功能优化建议"></table-ellipsis>
          <table-ellipsis v-if="record.questionType == 3" text="功能缺陷反馈"></table-ellipsis>
          <table-ellipsis v-if="record.questionType == 4" text="其他"></table-ellipsis>
        </template>
        <template slot="content" slot-scope="text, record">
          <table-ellipsis :text="text" :table-ellipsis-is-turn-line="false"></table-ellipsis>
        </template>

        <template #operation="text">
          <span style="display: flex">
            <span class="set-margin">
              <auth-button
                type="primary"
                :ghost="true"
                size="small"
                @click="editTbRow(text)"
              ><i class="iconfont icon-yanjing"/>{{ $t('view') }}</auth-button
              >
            </span>
          </span>
        </template>
      </s-table>
    </div>
    <new-helpinstructions ref="helpinstructionsrefs"></new-helpinstructions>
    <UserQuestionDetail :visible="detailVisible" :form-data="currentData" @close="detailVisible=false"/>
  </div>
</template>
<script>
  import STable from '@/components/Table/index'
  import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
  import {cols} from './config/list'
  import AuthText from '@/components/AuthText'
  import {managePerms} from '@/config/permission/index'
  import AuthButton from '@/components/AuthButton'
  import userApi from '@/api/modules/system/user'
  import newHelpinstructions from '@/views/user/newHelpinstructions.vue'
  import UserQuestionDetail from '@/views/system/feedback/components/UserQuestionDetail.vue'

  export default {
    components: {
      STable,
      tableEllipsis,
      AuthText,
      AuthButton,
      newHelpinstructions,
      UserQuestionDetail
    },
    props: {
      handleOperateRow: {
        type: Function,
        default: () => {
          return Function;
        },

      }

    },
    computed: {},
    data() {
      return {
        managePerms,
        detailVisible: false,
        currentData: null,
        defaultDateRange: null,
        queryParams: {},
        selectedRowKeys: [],
        columns: cols,
      }
    },
    methods: {
      // 请求数据加载表格
      loadData(parameter) {
        const vm = this
        // 如果是全部则不传值给后端
        const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParams))
        // eslint-disable-next-line no-restricted-syntax
        for (const key in JnqueryParam) {
          if (JnqueryParam[key] === '') {
            JnqueryParam[key] = undefined
          }else if (JnqueryParam[key] instanceof Array) {
            JnqueryParam[key] = JnqueryParam[key].toString()
          }else if (JnqueryParam[key] == null) {
            delete JnqueryParam[key]
          }
        }
        return userApi.getQuestionPageData({...JnqueryParam, ...parameter});
      },
      // 刷新表格
      refreshData(isToFirstPage = true) {
        const vm = this
        vm.$nextTick(() => {
          this.$refs.flowConfigTable.refresh(isToFirstPage)
        })
      },
      onCreateRangeChange(date, dateString) {
        // eslint-disable-next-line prefer-destructuring
        this.queryParams.feedbackTimeStart = dateString[0] || null
        // eslint-disable-next-line prefer-destructuring
        this.queryParams.feedbackTimeEnd = dateString[1] || null
        this.refreshData()
      },
      // 点击编辑按钮
      editTbRow(data) {
        this.currentData = {...data, questionTypes: [data.questionType]};
        this.detailVisible = true;
      },
      showtoBody() {
        return () => document.body
      },
      clearCondition() {
        this.queryParams = {};
        this.refreshData()
      },
      // 删除草稿
      deleteTb(data) {
        const that = this
        that.$confirm({
          title: that.$t('tip'),
          content: that.$t('deleteDraftTip').replace('__Content__', '"' + data.instanceName + '"'),
          onOk() {
            that.$api.deleteMyDraftApply([data.id]).then(() => {
              that.$message.success(that.$t('successfullyDelete'))
              that.refreshData(true)
            })
          },
          onCancel() {
          }
        })
      },
      // 打开编辑帮助说明
      handleHelpDescription() {
        this.$refs.helpinstructionsrefs.shutDown()
      }
    },
    beforeDestroy() {
    }
  }
</script>
<style lang="less" scoped>
  .set-margin {
    margin-right: 12px;
  }
</style>
